<template>
  <div v-loading="!show" element-loading-text="数据加载中..." class="app-container">
    <div v-if="show">
      <el-card>
        <i class="el-icon-s-tools"></i>
        <span class="system-info-title">系统：</span>{{ systemInfo.os }}
        <span class="system-info-title">IP：</span>{{ systemInfo.ip }}
        <span class="system-info-title">项目已正常运行：</span>{{ systemInfo.time }}
        <span class="system-info-title">系统当前时间：</span>{{ time | formatTime }}
      </el-card>

      <el-card style="margin-top:20px;padding-bottom:10px;">
        <div slot="header">硬件状态</div>
        <div>
          <el-row type="flex" justify="space-around">
            <el-col :span="5" style="text-align:center">
              <div>CPU使用率</div>
              <el-tooltip placement="top-end" class="system-progress">
                <div slot="content">
                  <div>{{ cpuInfo.name }}</div>
                  <div>{{ cpuInfo.package }}</div>
                  <div>{{ cpuInfo.core }}</div>
                  <div>{{ cpuInfo.logic }}</div>
                </div>
                <el-progress type="circle" :percentage="parseFloat(cpuInfo.usage)"></el-progress>
              </el-tooltip>
              <div>{{ cpuInfo.coreNumber }}核CPU</div>
            </el-col>
            <el-col :span="5" style="text-align:center">
              <div>内存使用率</div>
              <el-tooltip placement="top-end" class="system-progress">
                <div slot="content">
                  <div>总共：{{ memoryInfo.total }}</div>
                  <div>已用：{{ memoryInfo.used }}</div>
                  <div>剩余：{{ memoryInfo.usable }}</div>
                </div>
                <el-progress type="circle" :percentage="parseFloat(memoryInfo.usage)"></el-progress>
              </el-tooltip>
              <div>{{ memoryInfo.total }}</div>
            </el-col>
            <el-col :span="5" style="text-align:center">
              <div>磁盘使用率</div>
              <el-tooltip placement="top-end" class="system-progress">
                <div slot="content">
                  <div>总共：{{ diskInfo.total }}</div>
                  <div>已用：{{ diskInfo.used }}</div>
                  <div>剩余：{{ diskInfo.usable }}</div>
                </div>
                <el-progress type="circle" :percentage="parseFloat(diskInfo.usage)"></el-progress>
              </el-tooltip>
              <div>{{ diskInfo.total }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-row :gutter="40" style="margin-top:20px;">
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>CPU使用率</span>
            </div>
            <div v-for="o in 4" :key="o" class="text item">
              {{'列表内容 ' + o }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>内存使用率</span>
            </div>
            <div v-for="o in 4" :key="o" class="text item">
              {{'列表内容 ' + o }}
            </div>
          </el-card>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import { getServer } from '@/api/monitor'

export default {
  name: '',
  data () {
    return {
      show: false,
      systemInfo: {},
      cpuInfo: {},
      diskInfo: {},
      memoryInfo: {},
      time: undefined
    }
  },
  filters: {
    // 将毫秒格式化为可读的日期格式
    formatTime: function(value) {
      if(!value) return ''
      const date = new Date(value)
      return date.toLocaleString()
    }
  },
  mounted() {
    this.getServerInfo()
    this.$nextTick(() => {
      setInterval(this.setTime, 1000)
    })
  },
  methods: {
    // 获取服务器信息
    getServerInfo() {
      getServer().then(res => {
        const data = res.data
        this.systemInfo = data.system
        this.cpuInfo = data.cpu
        this.diskInfo = data.disk
        this.memoryInfo = data.memory
        const time = Date.parse(data.time)
        this.time = time
        this.show = true
      })
    },
    setTime() {
      var milliSecond = Date.parse(new Date(this.time))
      milliSecond += 1000;
      this.time = milliSecond
    }
  }
}

</script>

<style lang='scss' scoped>
  .system-info-title {
    margin-left: 10px;
    font-weight: 800;
  }
  .system-progress {
    margin: 20px 0;
  }
  .system-progress div {
    margin: 20px 0;
  }
</style>
